JS101 隨筆

#js

Posted by MoreCoke on 2020-06-19

前言

簡單紀錄我在這堂課學到甚麼東西,大部分的內容都能往下挖講更深,但我現在的目標是搞懂基礎並能夠運用,所以就不會講太多關於底層的觀念,哪天心血來潮再獨立個主題來寫。

&& || 的短路性質

&&(且)

簡單定義 : 必須左右兩側都是 true,才會回傳 true 。

console.log( true && true); // true

在 JS 中這些非布林值的資料(物件、陣列、數字、字串),在放入判斷式比較時會自動幫你轉成布林值,如果想看值轉 boolean 是 true 還是 false 可以用 JS 內建的 Boolean() 去檢查。下方的 truly 和 falsely 就是說資料的布林值是透過轉型得到的,而非 primitive type (純值) 中的 true 和 false。

如果左側的值轉 boolean 是 truly 的話,不管右側為 truly 還是 falsey , 會回傳右側的值

console.log(3 && 0); // 0

看結果有點難懂,可以想成 && 在背後有偷偷用 Boolean() 轉型。

console.log(3 && 0); // 0
---
3 && 0 // 我們看到的
true && false // JS 在背後做的

如果左側的值轉 boolean 是 falsely 的話會回傳左側的值,不會管右邊的值

console.log(0 && 10); // 0

所以 && 在做的事情就是看左側的值,如果是 falsely,直接回傳左側的結果;是 truly 的話就回傳右側的結果。

||(或)

簡單定義 : 左右側兩側只要有個是 true,就會回傳 true。

console.log( false || true); // true

如果左側的值轉 boolean 是 truly 的話,直接回傳左側的值,不會管右邊的值

console.log(3 || 0); // 3

如果左側的值轉 boolean 是 falsely 的話會回傳右側的值

console.log(0 || 10); // 10

|| 在做的事情一樣先看左側的值,如果是 falsely,直接回傳右側的結果;是 truly 的話就回傳左側的結果。

仔細看的話 && 和 || 在背後運作的原理滿像的,都是先看左側的值,再決定要不要繼續看右邊的值。

短路性質就是在說程式只執行左側沒跑右側的情況。

0 && console.log('hi') // 0

先做再說:do...while...

主要是 chrome 的 debug 教學,忘記能回去看。

從 Object 的等號真正的理解變數

使用 function 時的注意事項

關於 JS 是傳值(pass by value)還是傳參考(pass by reference)每個人都講的不一樣,還有聽過 pass by sharing 這樣的概念,就用例題解釋這個現象吧,這樣最快。

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num); // 10
console.log(obj1.item); // "changed"
console.log(obj2.item); // "unchanged"

function 的參數會再複製一份參考,參數 a 和參數 c 的觀念差不多,這邊就只說參數 a ,參數 a 複製了 num = 10 的參考,只是最後用 a = a * 10重新賦值改變了參數 a 的參考,所以最後才不會改到 num 的值;而參數 b 因為 b.item = "changed"; 直接改到參考的內容,所以最後變異(mutable)了物件內 item 的值。

等號的話可以想成是重新賦值,直接指派一個新的參考給變數,自然不會動到原本指向參考的內容。

參考資料:
Is JavaScript a pass-by-reference or pass-by-value language?
重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」?

引數(Argument)與參數(Parameter)

function sayhi(name) {
  console.log('hi, ', name);
}
sayhi('MoreCoke'); // 'hi, MoreCoke'

參數就是 function 中的 name,參數是用來告訴使用者這個 function 可以塞甚麼東西。
引數就是使用者自己塞進去的東西('MoreCoke')。

return 不 return,有差嗎?

在使用 google 開發者檢查工具常搞不懂為什麼會有 undefined。
在 function 能看到 :


在 宣告變數也能看到 :

現在才知道如果沒有 return 值的話,預設會回傳 undefined。

如果會回傳東西,自然就是印出回傳值了。


#js







Related Posts

Day04 : 程式結構 - 1

Day04 : 程式結構 - 1

Native Speech Recognition

Native Speech Recognition

在Gatsby GraphQL中組合出完美資料

在Gatsby GraphQL中組合出完美資料


Comments